<template>
	<view class="imgbox">
		<!-- 底层背景图 -->
		<image src="../../static/img/pageBg1.png" mode="" class="bg-image"></image>
		<!-- 上层蒙层图 -->
		<image src="../../static/img/pageBg.png" mode="" class="mask-image"></image>

		<view class="logo-img">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>

		<!-- 欢迎来访区域 - 确保可点击 -->
		<view class="logo-tisp">
			中船集团 智领深蓝
		</view>

		<view class="Welcome" @click.stop="$emit('click-welcome')">
			<view class="">欢迎来访</view>
			<!-- <button class="btn-hide" open-type="getPhoneNumber" @getphonenumber="handlePhone"></button> -->
		</view>
	</view>
</template>
<script setup>
	
	import methods from '@/utils/methods.js'
	const emit = defineEmits(['click-welcome']);

</script>

<style lang="scss">
	.imgbox {
		width: 100vw;
		height: 100vh;
		position: absolute;
		/* 改为绝对定位 */
		top: 0;
		left: 0;
		overflow: hidden;
		transition: all 0.8s ease-out;
		z-index: 10;
		/* 确保在首页内容之上 */

		.bg-image,
		.mask-image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		/* 底层背景图 */
		.bg-image {
			z-index: 1;
		}

		/* 上层蒙层图 */
		.mask-image {
			z-index: 2;
		}

		.logo-img {
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);
			width: 380rpx;
			height: 100rpx;
			z-index: 3;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.logo-tisp {
			position: absolute;
			bottom: 20%;
			left: 50%;
			transform: translateX(-50%);
			z-index: 10;
			color: var(--color-ff);
			font-size: var(--font-20);
			letter-spacing: 3px;
			white-space: nowrap;
		}

		.Welcome {
			position: absolute;
			bottom: 10%;
			left: 50%;
			transform: translateX(-50%);
			width: 240rpx;
			height: 80rpx;
			z-index: 10;
			border: 1px solid #34579f;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16rpx;
			color: var(--color-ff);
			font-size: var(--font-16);
			cursor: pointer;
			animation: sway 2s ease-in-out infinite;
			/* 添加点击反馈效果 */
			touch-action: manipulation;
		}

		/* 点击时的反馈效果 */
		.Welcome:active {
			transform: translateX(-50%) scale(0.95);
		}

		@keyframes sway {
			0% {
				transform: translateX(-50%) translateX(-8px);
			}

			50% {
				transform: translateX(-50%) translateX(8px);
			}

			100% {
				transform: translateX(-50%) translateX(-8px);
			}
		}
	}
</style>